<template>
	<view class="card">
		<swiper class="card-lunbo" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			circular="true">
			<swiper-item v-for=" banner in cardInfo.category.bannerUrlList" :key="banner">
				<image :src="banner" mode=""></image>
			</swiper-item>
		</swiper>
		<view>{{cardInfo.category.name}}</view>
		<view>{{cardInfo.category.frontDesc}}</view>
		<view class="card-content">
			<view class="content-item" v-for=" item in cardInfo.itemList" :key="id">
				<image :src="item.primaryPicUrl" mode=""></image>
				<text>{{item.name}}</text>
				<text>商品价格:{{item.counterPrice}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		name: 'Card',
		props:['navId'],
		computed:{
			//在计算属性中映射的数据相当于是当前组件中data的数据
			...mapState('home',['homeCardListData']),
			cardInfo(){
				return this.homeCardListData.find(item=>item.category.parentId === this.navId) || {}
			}
		},
		mounted(){
			/* this.$store.dispatch('home/getHomeCardListData') */ //原始方法
			this.getHomeCardListData()
		},
		methods:{
			...mapActions('home',['getHomeCardListData'])
		}
	}
</script>

<style scoped lang="stylus">
	.card
		text-align: center
		.card-lunbo
			image
				width: 100%
				height: 350upx
		.card-content
			display: flex
			flex-wrap: wrap
			.content-item
				display: flex
				flex-direction: column
				text-align: left
				width: 50%
				image
					width: 100%
					height: 300upx
</style>
